<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model="activeName" @click="onClick">
      <van-tab :title="item.name" :name="item.name" v-for="item in navData" :key="item.id">
        <div class="van-tabs__content">
          <div class="van-tab__pane">
            <!--  -->
            <div class="info">
              <p class="title" :title="title">{{title}}</p>
              <p class="txt" :txt="txt">{{txt}}</p>
            </div>
            <div class="list">
              <router-link
                :to="{path: '/home/new/good',query:{id:item.id,openId:17516331686}}"
                class="item"
                v-for="item in goods"
                :key="item.id"
              >
                <img :src="item.list_pic_url" alt />
                <p class="name">{{item.name}}</p>
                <p class="price">￥{{item.retail_price}}</p>
              </router-link>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { categoryNav, goodsList } from "@/api/nav";
export default {
  data() {
    return {
      activeName: "",
      navData: [],
      channel: [],
      goods: [],
      currentNav: [],
      title: "",
      txt: ""
    };
  },
  created() {
    categoryNav({
      id: this.$route.query.id
    }).then(res => {
      console.log(res); //进入页面
      this.navData = res.navData;
      this.currentNav = res.currentNav;
      this.activeName = this.title = res.currentNav.name;
      this.txt = res.currentNav.front_desc;
    });
    goodsList({
      categoryId: this.$route.query.id
    }).then(res => {
      console.log(res);
      this.goods = res.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClick(name) {
      var channel = this.navData.find(e => e.name == name);
      this.channel = channel;
      goodsList({
        categoryId: this.channel.id
      }).then(res => {
        console.log(res);
        this.goods = res.data;
        this.title = channel.name;
        this.txt = channel.front_desc;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.van-tabs__content {
  height: calc(100% - 1.09333rem);
  overflow: auto;
  .van-tab__pane {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    .info {
      text-align: center;
      background: #fff;
      padding: 0.4rem;
      margin-top: 0.26667rem;
      margin-bottom: 0.06667rem;
      .title {
        margin-bottom: 0.24rem;
        font-size: 0.4rem;
        color: #333;
      }
      .txt {
        display: block;
        height: 0.32rem;
        font-size: 0.32rem;
        color: #999;
      }
    }
    .list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        display: inline-block;
        width: 4.96667rem;
        margin-bottom: 0.06667rem;
        text-align: center;
        background: #fff;
        padding: 0.2rem 0;
        color: black;
        img {
          display: block;
          width: 4.02667rem;
          height: 4.02667rem;
          margin: 0 auto;
        }
        .name {
          margin: 0.2rem 0 0.29333rem 0;
          text-align: center;
          padding: 0 0.26667rem;
          font-size: 0.32rem;
        }
        .price {
          text-align: center;
          font-size: 0.4rem;
          color: #b4282d;
        }
      }
    }
  }
}
</style>